<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>用户列表</span>
            </div>
        </template>
        <el-button type="primary" size="default" @click="isShowAdd=true">添加</el-button>
        
        <el-table :data="users" row-key="id" :expand-row-keys="Array.from(expandSet)" @expand-change="changeExpand" border>
            <el-table-column type="expand" label="序号" width="60" #="{ row }">
                <pre>{{ row }}</pre>
            </el-table-column>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="mobile" label="电话" />
            <el-table-column label="角色" #="{ row }">
                <span :class="{ sys_user:row.role_id==0 }">{{ row.role_id==-1?'未分配角色':row.role_name }}</span>
            </el-table-column>
            <el-table-column label="状态" #="{ row }">
                <el-switch v-if="row.role_id!=0&&row.role_id!=-1" 
                    :model-value="row.mg_state" 
                    @change="changeUserState(row,$event)"
                ></el-switch>
            </el-table-column>
            <el-table-column label="操作" #="{ row }">
                <el-button type="primary" size="default" icon="Edit" @click="openEditDailog(row)"/>
                <el-button type="danger" size="default" icon="Delete" />
                <el-button type="primary" size="default" icon="Setting" />
            </el-table-column>
        </el-table>
        <el-pagination background
            :page-sizes="[5, 10, 15, 20, 25, 30]"  
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" 
            v-model:page-size="params.pagesize"
            v-model:current-page="params.pagenum"
            @current-change="expandSet.clear(),loadUserList()"
            @size-change="resetLoadUsers()"
        />

        <Teleport to="body">
            <AddUserDialog v-model="isShowAdd" @reload="resetLoadUsers"></AddUserDialog>
            <EditUserDialog v-model="isShowEdit" @reload="loadUserList" ref="editDialog"></EditUserDialog>
        </Teleport>

    </el-card>
</template>

<script>
import { findUserList,updateUserState } from "@/api/userApi.js";
import { ElNotification } from "element-plus";
import AddUserDialog from "./Dialog/AddUserDialog.vue";
import EditUserDialog from "./Dialog/EditUserDialog.vue";
export default {
    components: {
        AddUserDialog,EditUserDialog,
    },
    data() {
        return {
            params: {
                query: "",
                pagenum: 1,
                pagesize: 5
            },
            total:0,
            users: [],
            isShowAdd:false,
            isShowEdit:false,
            expandSet:new Set([])
        }
    }, 
    methods: {
        openEditDailog(u){
            this.isShowEdit = true;
            this.$nextTick(()=>{
                this.$refs.editDialog.user = { ...u };
            })
        },
        changeExpand(user){
            if(this.expandSet.has(user.id)){
                this.expandSet.delete(user.id)
            }else{
                this.expandSet.add(user.id)
            }
        },  
        async loadUserList() {
            let result = await findUserList(this.params);
            if (result === null) return;
            this.total = result.total
            this.users = result.users
        },
        async changeUserState(user,state){
            console.log(user,state);
            // ajax
            let result = await updateUserState(user.id,state)
            if(result===null) return;
            // this.loadUserList();
            user.mg_state = state;
            ElNotification.success({
                title:`“${user.username}”账号已${state?"启用":"禁用"}`
            })
        },
        resetLoadUsers(){
            this.expandSet.clear();
            this.params.pagenum = 1;
            this.loadUserList();
        }
    },
    created() {
        this.loadUserList();
    },
}
</script>

<style lang="scss" scoped>
.sys_user{
    color: var(--el-color-danger);
}
</style>